<h1>Regarding Form Attributes</h1>

<p>While Trongate MX enhances form handling with dynamic features, it's important to understand how to leverage HTML5's built-in form validation attributes and other useful form properties. These attributes can improve user experience by providing immediate feedback before form submission.</p>

<h2>Making Fields Required</h2>

<p>To make specific fields required in your form, add the 'required' attribute to individual form elements:</p>

<p>Here's how to implement this using Trongate's helper functions:</p>
[code=vf]
&lt;?php
$form_attr = [
    'mx-post' =&gt; 'users/create'
];
echo form_open('#', $form_attr);

$username_attr = [
    'required' =&gt; 'true'
];
echo form_label('Username');
echo form_input('username', '', $username_attr);

$email_attr = [
    'required' =&gt; 'true'
];
echo form_label('Email');
echo form_input('email', '', $email_attr);

// This field is optional
echo form_label('Phone');
echo form_input('phone', '');

echo form_submit('submit', 'Create Account');
echo form_close();
?&gt;
[/code]

<p class="mt-3 mb-0">For those who prefer working directly with HTML, here's how to achieve the same functionality:</p>
[code=html]
&lt;form mx-post="users/create"&gt;
    &lt;label&gt;Username&lt;/label&gt;
    &lt;input type="text" name="username" required&gt;
    
    &lt;label&gt;Email&lt;/label&gt;
    &lt;input type="text" name="email" required&gt;
    
    &lt;label&gt;Phone&lt;/label&gt;
    &lt;input type="text" name="phone"&gt;
    
    &lt;button type="submit"&gt;Create Account&lt;/button&gt;
&lt;/form&gt;
[/code]

<h2>Setting Input Lengths</h2>

<p>You can control the minimum and maximum length of text input fields:</p>

<p>Using Trongate's form helper functions:</p>
[code=vf]
&lt;?php
$form_attr = [
    'mx-post' =&gt; 'users/create'
];
echo form_open('#', $form_attr);

$username_attr = [
    'required' =&gt; 'true',
    'minlength' =&gt; '3',
    'maxlength' =&gt; '30'
];
echo form_label('Username (3-30 characters)');
echo form_input('username', '', $username_attr);

$bio_attr = [
    'maxlength' =&gt; '200'
];
echo form_label('Bio (max 200 characters)');
echo form_textarea('bio', '', $bio_attr);

echo form_submit('submit', 'Create Account');
echo form_close();
?&gt;
[/code]

<p class="mt-3 mb-0">Here's the same implementation using straightforward HTML:</p>
[code=html]
&lt;form mx-post="users/create"&gt;
    &lt;label&gt;Username (3-30 characters)&lt;/label&gt;
    &lt;input type="text" 
           name="username" 
           required 
           minlength="3" 
           maxlength="30"&gt;
    
    &lt;label&gt;Bio (max 200 characters)&lt;/label&gt;
    &lt;textarea name="bio" 
              maxlength="200"&gt;&lt;/textarea&gt;
    
    &lt;button type="submit"&gt;Create Account&lt;/button&gt;
&lt;/form&gt;
[/code]

<h2>Numeric Input Ranges</h2>

<p>For numeric inputs, you can specify acceptable minimum and maximum values:</p>

<p>Here's the implementation using Trongate's helper functions:</p>
[code=vf]
&lt;?php
$form_attr = [
    'mx-post' =&gt; 'products/create'
];
echo form_open('#', $form_attr);

$quantity_attr = [
    'required' =&gt; 'true',
    'min' =&gt; '1',
    'max' =&gt; '100'
];
echo form_label('Quantity (1-100)');
echo form_number('quantity', '', $quantity_attr);

$price_attr = [
    'required' =&gt; 'true',
    'min' =&gt; '0.01',
    'max' =&gt; '9999.99'
];
echo form_label('Price ($0.01 - $9999.99)');
echo form_number('price', '', $price_attr);

echo form_submit('submit', 'Add Product');
echo form_close();
?&gt;
[/code]

<p class="mt-3 mb-0">To achieve this using pure HTML, here's the equivalent code:</p>
[code=html]
&lt;form mx-post="products/create"&gt;
    &lt;label&gt;Quantity (1-100)&lt;/label&gt;
    &lt;input type="number" 
           name="quantity" 
           required 
           min="1" 
           max="100"&gt;
    
    &lt;label&gt;Price ($0.01 - $9999.99)&lt;/label&gt;
    &lt;input type="number" 
           name="price" 
           required 
           min="0.01" 
           max="9999.99"&gt;
    
    &lt;button type="submit"&gt;Add Product&lt;/button&gt;
&lt;/form&gt;
[/code]

<h2>Autocomplete Settings</h2>

<p>The autocomplete attribute controls whether browsers should offer to save and auto-fill form data. This can be particularly important for login forms and sensitive information:</p>

<p>First, let's look at how to implement this using Trongate's helper functions:</p>
[code=vf]
&lt;?php
// Example 1: Disable autocomplete for the entire form
$form_attr = [
    'mx-post' =&gt; 'users/login',
    'autocomplete' =&gt; 'off'
];
echo form_open('#', $form_attr);
echo form_label('Username');
echo form_input('username', '');
echo form_label('Password');
echo form_password('password', '');
echo form_submit('submit', 'Login');
echo form_close();

// Example 2: Enable autocomplete but with specific field behaviors
$form_attr = [
    'mx-post' =&gt; 'users/register'
];
echo form_open('#', $form_attr);

// Encourage browsers to suggest a new password
$password_attr = [
    'autocomplete' =&gt; 'new-password'
];
echo form_label('Choose Password');
echo form_password('password', '', $password_attr);

// Allow autocomplete for non-sensitive information
$email_attr = [
    'autocomplete' =&gt; 'email'
];
echo form_label('Email');
echo form_input('email', '', $email_attr);

echo form_submit('submit', 'Register');
echo form_close();
?&gt;
[/code]

<p class="mt-3 mb-0">Here's how to achieve the same functionality using standard HTML:</p>
[code=html]
&lt;!-- Example 1: Disable autocomplete for the entire form --&gt;
&lt;form mx-post="users/login" autocomplete="off"&gt;
    &lt;label&gt;Username&lt;/label&gt;
    &lt;input type="text" name="username"&gt;
    &lt;label&gt;Password&lt;/label&gt;
    &lt;input type="password" name="password"&gt;
    &lt;button type="submit"&gt;Login&lt;/button&gt;
&lt;/form&gt;

&lt;!-- Example 2: Enable autocomplete with specific field behaviors --&gt;
&lt;form mx-post="users/register"&gt;
    &lt;label&gt;Choose Password&lt;/label&gt;
    &lt;input type="password" 
           name="password" 
           autocomplete="new-password"&gt;
    
    &lt;label&gt;Email&lt;/label&gt;
    &lt;input type="text" 
           name="email" 
           autocomplete="email"&gt;
    
    &lt;button type="submit"&gt;Register&lt;/button&gt;
&lt;/form&gt;
[/code]

<div class="alert alert-info">
<h3>Common Validation Attributes:</h3>
<ul>
    <li><code>required</code>: Field must be filled out before submission</li>
    <li><code>minlength</code>: Minimum number of characters for text input</li>
    <li><code>maxlength</code>: Maximum number of characters for text input</li>
    <li><code>min</code>: Minimum value for numeric inputs</li>
    <li><code>max</code>: Maximum value for numeric inputs</li>
    <li><code>pattern</code>: Regular expression pattern for validation</li>
</ul>
</div>

<div class="alert alert-info">
<h3>Autocomplete Values:</h3>
<ul>
    <li><code>off</code>: Suggests that browsers should not automatically enter or select a value for this field</li>
    <li><code>new-password</code>: Indicates this field is for a new password, helping password managers suggest strong passwords</li>
    <li><code>email</code>: Indicates this field expects an email address</li>
    <li><code>tel</code>: Indicates this field expects a telephone number</li>
</ul>
</div>

<h2>Summary</h2>

<p>HTML form attributes and client-side validation provide an essential first line of defense against invalid data while improving user experience. While client-side validation enhances user experience, remember to always implement server-side validation for security. Each validation attribute serves a specific purpose, and using them appropriately helps create more user-friendly forms.</p>